<%-- 
    Document   : index
    Created on : 2015-4-23, 11:16:50
    Author     : ppc
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jspf/import.jspf" %>
<!doctype HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <title>${fn:escapeXml(oClub.name)}</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="LiuLong_gz ZhongQingbiao_gz"/>
        <link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2015/club_brand/brand_models.css">
    </head>

    <body class="g-doc" id="Jlazy_img">

        <!--栏目计数器/文章计数器-->
        <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="8233" />
        </jsp:include>

        <!-- 公共头部 -->
        <%@include file="/template/wap/common/intf6007.html" %>
        <!-- 公共头部end -->
        <!-- 公共头部 S -->
        <nav class="g-hd">
            <a href="http://m.pcauto.com.cn" class="header-home" title="太平洋汽车网"></a>
            <div class="header-title">
                <span class="header-title-nav">
                    ${fn:escapeXml(oClub.name)}
                </span>
            </div>
          <c:if test="${isMember}">
            <a class="g-hd-btn g-hd-btn-edit" href="${OCLUBWAPROOT}/${oClub.url}/postDyna/"></a>
          </c:if>
        </nav>
        <!-- 公共头部 E -->

        <!-- 大背景图头部 S -->
        <div class="top-bg">
            <img class="bg-pic"  src="${empty oClub.coverImage640x160?"":oClub.coverImage640x160}">
            <div class="info-txt">
                <img class="info-head-pic" src="${fn:escapeXml(oClub.logo150x150)}" alt="">
                <h2 class="addV">${fn:escapeXml(oClub.name)}</h2>
                <div class="info-num">
                    <span><i class="txt">访问量</i><em class="num">${totalPv}</em></span>
                    <span><i class="txt">会员数</i><em class="num">${oClub.memberNum}</em></span>
                </div>
            </div>
        </div>

        <!-- 大背景图头部 E -->
        <c:if test="${!isMember}">
        <!-- 立即加入 S -->
        <a href="javascript:${isLogin?"joinClub();":"login();"}" title="立即加入" class="btn-join">立即加入</a>
        <!-- 立即加入 E -->
        </c:if>

        <div class="hot-act">
            <div class="box-top">
                <span>热门活动</span>
                <a class="act-num" href="${OCLUBWAPROOT}/${oClub.url}/activitys/" title="">${activityCount}个<i class="gt">&gt;</i></a>
            </div>
            <ul class="box-content">
                <!--
                通过class控制活动帖、置顶帖，new帖和普通帖的区分
                活动帖：i-act  置顶帖：i-top
                new帖：e-new
                 -->
                 <c:if test="${not empty oActivity}">
                    <li class="i-act e-new"><a href="${OCLUBWAPROOT}/${oClub.oClubId}/activity/a${oActivity.activityId}" title="">${oActivity.title}</a></li>
                 </c:if>
                 <c:forEach items="${topDyna.resultList}" var="top">
                     <c:if test="${top.type==1 || top.type==4}">
                     <li class="i-top"><a href="${BBSWAPROOT}/topic-${top.topicId}.html">${top.title}</a></li>
                     </c:if>
                     <c:if test="${top.type==2}">
                     <li class="i-top"><a href="${OCLUBWAPROOT}/${fn:escapeXml(oClub.url)}/dt/${top.dynaInfoId}">${top.title}</a></li>
                     </c:if>
                      <c:if test="${top.type==6}">
                     <li class="i-act"><a href="${OCLUBWAPROOT}/${fn:escapeXml(oClub.url)}/activity/a${top.targetId}">${top.title}</a></li>
                     </c:if>
                 </c:forEach>
            </ul>
        </div>
        <!--
            class:hd-ph-v 为v头像
            article为块，section分为两种 一种是普通的文字+三张图 对应class:content ; 一种是活动 对应class:content2
            出页面时候，判断说说之前是否点过赞。如果没有点过赞的，则为class为like的增加一个class：i-unlike，若是点过赞的则增加class：i-like。
            在当前页面点击赞，为like增加class like-clicked，此class仅为了实现css动画，实际样式用i-unlike和i-like控制。
          -->
          <div id="dynaList">
          </div>
        <a href="javascript:;" id="J-loadmore1" class="loadmore"><i data-txt="点击加载更多">点击加载更多</i></a>
        <div class="pub-item" style="height: 100px; line-height:100px; text-align:center;display:none" id="J-nodata">暂无内容</div>
        <div class="pop" style="display:none;" id="J-joinSuccess">
            <div id="J-joinMessage"  class="joinMessage">
            </div>
            <p class="close" onclick="location.reload();">我知道了</p>
        </div>
        <!-- 公共底部 --> 
         <%@include file="/template/wap/common/intf5987.html" %>
         <!-- 公共底部end --> 
        <script src="http://js.3conline.com/wap/pcauto/common/zepto1.1.6.min.js" ></script>
        <script src="http://js.3conline.com/wap/common/swipe.extend-min.js" charset="utf-8"></script>
        <script src="http://js.3conline.com/wap/common/wap.lazy-min.js"></script>
        <script src="http://js.3conline.com/wap/pcauto/2015/club_brand/js/showBigPic.js"></script>
        <script>
            var oClubId = "${oClub.oClubId}";
            var praiseUrl="${WAPROOT}/dyna/doPraise.do";
            var dynaListUrl = "${OCLUBWAPROOT}/dyna/getDynaListByClubId.do";
            var joinUrl = "${OCLUBWAPROOT}/member/joinClub.do";
            var addPvUrl = "${OCLUBWAPROOT}/stat/addPv.do"
            var addVisitorUrl = "${OCLUBWAPROOT}/stat/addVisitor.do"
            var loginUrl = "${UCWAPROOT}/passport/login.jsp?return="+location.href;
            var dynaHtml='<article class="pub-item"><header class="m-list-head">'
                        +'<a href="${UCWAPROOT}/{userId}" title="" class="hd-ph-wrap hd-ph-v"><img class="user-hd-ph" src="http://www1.pcauto.com.cn/images/holder.png" #src="{faceUrl}" alt=""></a><p class="user-name">{nickName}</p>'
                        +'<p class="pub-type">{dynaTypeHtml}</p> <i class="handle"></i></header><section class="content"><h3 class="">{title}</h3>{picHtml}'
                        +'</section> <footer class="pub-foot"><span class="pub-time">{time}</span> <div class="re-wrap"><a href="javascript:;" class="like {praiseClass}" data-dynaInfoId="{dynaInfoId}" data-isPraise="{isPraise}" data-createDate="{createDate}" onclick="doPraise(this)"><i class="icon"></i><em>{praiseCount}</em></a>'
                        +'<a href="{dtUrl}" class="reply"><i class="icon"></i><em>{postCount}</em></a> </div></footer></article>';
           var activityHtml ='<article class="pub-item"><header class="m-list-head"><a href="${UCWAPROOT}/{userId}" title="" class="hd-ph-wrap"><img  class="user-hd-ph" src="{faceUrl}" alt=""></a><p class="user-name">{nickName}</p>'
                        +'<p class="pub-type">发起了活动</p><i class="handle"></i></header><section class="content2"><a href="#" title=""><img src="{smailPic}" width="150" height="150" data-meta="{bigPic}" alt="" class="pic">'
                        +'<h3>{title}</h3><span class="info1"><em>{joinCount}</em>人报名</span><span class="info2">{money}元/人</span></a></section><footer class="pub-foot"><span class="pub-time">{time}</span><div class="re-wrap">'
                        +'<a href="javascript:;" class="like {praiseClass}" data-dynaInfoId="{dynaInfoId}" data-isPraise="{isPraise}" data-createDate="{createDate}" onclick="doPraise(this)"><i class="icon"></i><em>{praiseCount}</em></a><a href="javascript:void(0);" class="reply"><i class="icon"></i><em>{postCount}</em></a></div></footer></article>';
           var picHtml = '<div class="pic-wrap {picClass}">{photoHtml}</div>';
           var isLogin = "${isLogin}";
           var isUserLock = ${isUserLock};//用户是否被锁  
           var pageNo = 1;
           var pageSize = 10;
           var isPraise = 1;
           var noPraise = 0;

            // 修复active
            document.addEventListener("touchstart", function(){}, true);
            // 按需加载
            function lazyfun(){
                var xx = Lazy.create({
                    lazyId: "Jlazy_img",
                    trueSrc: '#src',
                    offset: 300, //灵敏度。如设置为100，表示滚动在距离目标位置100px执行，默认为半屏高度
                    delay: 100, //该毫秒时间内触发则延时100毫秒再加载
                    delay_tot: 1000 //滚动过程中多长时间后强行触发一次，默认值是 1000，单位毫秒
                });
                Lazy.init(xx);
            }
            lazyfun();
            /*各种提示*/
            function showTips(msg){
                var tips = document.getElementById('Jtips');
                if(!tips) {
                    tips = document.createElement('div');
                    tips.id = 'Jtips';
                    tips.className = 'm-tips';
                    document.body.appendChild(tips);
                }
                tips.innerHTML = msg;
                tips.style.display = 'block';
                var tips_width = tips.clientWidth/2;
                tips.style.marginLeft = '-'+tips_width+'px';
                tips.style.opacity = 1;    
                setTimeout(function(){
                    tips.style.webkitTransition = 'all 0.3s ease-in';
                    tips.style.opacity = 0;
                    tips.style.marginTop = '-80px';
                    setTimeout(function(){
                        tips.style.display = 'none';
                        tips.style.marginTop = '-40px';
                    }, 300);
                }, 2000);
            }
            $('.loadmore').click(function(event){
                var ele = $(this).find('i');
                // 先判断是不是在加载状态,若是初次点击 则给予loading动画，并在此处处理ajax，屏蔽掉多次点击
                // 加载成功后去掉class loading
                if(!ele.hasClass('loading')){
                    // load动画
                    ele.attr('data-txt',ele.html());
                    ele.html('');
                    ele.addClass('loading');
                    loadDynaList(++pageNo,pageSize);
                }
//                // 先写为auto
//                $('.con-wrap').css('height','auto');
//                // 此处输出字符串
//                var curHeight = $(this).parent().height();
//                $('.con-wrap').height(curHeight);
                lazyfun();

            });
            function doPraise(e){
                if(!isLogin){
                    showTips("请先登录");
                    return;
                }
                var dynaInfoId = $(e).attr("data-dynaInfoId");
                var createDate = $(e).attr("data-createDate");
                var praise = $(e).attr("data-isPraise");
                if(dynaInfoId==null || createDate==null || isPraise == null){
                    return false;
                }
                var submitPraise = isPraise;
                if(praise == isPraise){
                    submitPraise = noPraise
                }
                if(!($(e).attr("isSending")=="true")){
                    $(e).attr("isSending",true);
                    $.post(praiseUrl,{dynaInfoId:dynaInfoId,createDate:createDate,isPraise:submitPraise},function(data){
                        var em = $(e).find("em");
                        var count = em.html();
                        if(data.code == 0){
                                if(submitPraise == isPraise){
                                $(e).removeClass("i-unlike");
                                $(e).addClass('i-like like-clicked');
                                $(e).attr("data-isPraise",isPraise);
                                if(count == "赞"){
                                    em.html(1);
                                }else{
                                    em.html(parseInt(count)+1);
                                }
                            }else if(submitPraise == noPraise){
                                $(e).attr("data-isPraise",noPraise);
                                 $(e).removeClass("i-like");
                                 $(e).addClass("i-unlike  like-clicked");
                                if(count <= 1 || isNaN(count)){
                                    em.html("赞");
                                }else{
                                    em.html(parseInt(count)-1);
                                }
                            }
                            setTimeout(function(){
                                $(e).removeClass('like-clicked');
                            },400);
                        }else{
                            showTips(data.message);
                        }
                        
                        $(e).attr("isSending",false);
                    },"json");
                }
            }
            function loadMorCallback(){
                var ele = $(".loadmore").find('i');
                ele.html(ele.attr('data-txt'));
                ele.removeClass('loading');
            }
            function loadDynaList(pageNo,pageSize){
                $.getJSON(dynaListUrl,{pageNo:pageNo,pageSize:pageSize,oClubId:oClubId,needToViewUrl:1},function(data){
                    if(data && data.code==0){
                        var html = template(data.data);
                        $("#dynaList").append(html);
                        lazyfun();
                        if(pageNo ==1 && !data.data){
                            $(".loadmore").hide();
                            $("#J-nodata").show();
                        }
                        if(pageNo >= data.pageCount || !data.data){
                            $(".loadmore").hide();
                        }
                    }
                    loadMorCallback();
                })
            }
            function template(data){
                var html = "";
                if(data && data.length>0){
                    var len = data.length;
                    for(var i=0;i<len;i++){
                        var result = data[i];
                        html+=templateHtml(result);
                    }
                }
                return html;
            }
            function templateHtml(result){
                var html = "";
                if(result){
                    var dtUrl = "";
                    if(result.templateId=="template-commentDyna"){
                        html = dynaHtml.replace(/{dynaTypeHtml}/ig,"发表了说说").replace(/{title}/ig,result.content);
                        dtUrl = "${OCLUBWAPROOT}/${oClub.url}/dt/"+result.dynaInfoId;
                    }else if(result.templateId=="template-topicDyna"){
                        var title = "<a href='${BBSWAPROOT}/topic-"+result.topicId+".html' title='"+result.title+"' class='no-highlight'>"+result.title+"</a>";
                        dtUrl = "${BBSWAPROOT}/topic-"+result.topicId+".html";
                        html = dynaHtml.replace(/{dynaTypeHtml}/ig,"发表了帖子").replace(/{title}/ig,title);
                    }else if(result.templateId=="template-subjectDyna"){
                        html = dynaHtml.replace(/{dynaTypeHtml}/ig,"参与了"+result.subjectCount+"个话题").replace(/{title}/ig,result.content);;
                        dtUrl = "${OCLUBWAPROOT}/${oClub.url}/dt/"+result.dynaInfoId;
                    }else if(result.templateId=="template-activityDyna"){
                        html = activityHtml.replace(/{smailPic}/ig,result.activityCover).replace(/{bigPic}/ig,"").replace(/{title}/ig,result.activityTitle).replace(/{money}/ig,result.activityMoney).replace(/{joinCount}/ig,result.activityMaxJoin);
                    }
                    if(result.images && result.images.length>0){
                      var photoHtml = "";
                      var len = result.images.length;
                      for(var i = 0 ;i < len; i++){
                        photoHtml += '<img src="http://www1.pcauto.com.cn/images/holder.png" #src="'+result.images[i].smaPic+'" width="'+result.images[i].width+'" height="'+result.images[i].height+'" data-meta="'+result.images[i].bigPic+'" alt="">';  
                      }
                      html = html.replace(/{picHtml}/ig,picHtml.replace(/{photoHtml}/ig,photoHtml).replace(/{picClass}/ig,len==1?"pics_1":len==4?"pics_4":""));
                    }else{
                        html = html.replace(/{picHtml}/ig,"");
                    }
                    html = html.replace(/{nickName}/ig,result.nickName).replace(/{faceUrl}/ig,result.avatar).replace(/{time}/,result.fmtCreateDate)
                            .replace(/{postCount}/ig,result.postCount==0?"回复":result.postCount).replace(/{praiseCount}/ig,result.praiseCount==0?"赞":result.praiseCount)
                            .replace(/{praiseClass}/ig,result.isPraise?"i-like":"i-unlike").replace(/{isPraise}/ig,result.isPraise?1:0).replace(/{dynaInfoId}/ig,result.dynaInfoId)
                            .replace(/{createDate}/ig,result.createDate).replace(/{userId}/ig,result.userId).replace(/{dtUrl}/ig,dtUrl);
                }
                return html;
            }
            function joinClub(){
                if(isUserLock){
                    showTips("您所绑定的手机号码已经被该车友会封锁,请在个人中心更改绑定的手机号码！");
                    return false;
                }
                $.post(joinUrl,{oClubId:oClubId},function(data){
                    if(data){
                        if(data.code==0){
                            $("#J-joinMessage").html(data.message);
                            $("#J-joinSuccess").css('display','block');;
                        }else{
                            showTips(data.message);
                        }
                     }
                },"json");
            }
            function login(){
                location.href=loginUrl;
            }
            function addPV(){
                $.ajax({
                    url:addPvUrl,
                    type:"post",
                    data:{oClubId:oClubId},
                    dataType:"json",
                    success:function(data){},
                    error:function(){}
                });
            }
            function addVisitor(){
                $.ajax({
                    url:addVisitorUrl,
                    type:"post",
                    data:{oClubId:oClubId},
                    dataType:"json",
                    success:function(data){},
                    error:function(){}
                });
            }
            $(function(){
                // 大图展示 
                showBigPic('.pic-wrap img','.pic-wrap');
                //加载动态列表
                loadDynaList(1,10);
                //增加访问量
                addPV();
                //增加访问记录
                if(isLogin){
                        addVisitor();
                }
            });
        </script>

    </body>
</html>